<template>
  <div >
    <div style="width:80%;">
      <el-input
        placeholder="输入组织名称进行过滤"
        size="mini"
        v-model="filterText">
      </el-input>
    </div>
    <div style="height:5px"></div>
    <div  id="divScrollCss" ref="wrapper"  :style="{ height: wrapperHeight + 'px' }" class="tfscrollbarstyle">
      <el-tree
        class="filter-tree"
        empty-text="数据异常"
        node-key="id"
        :expand-on-click-node="false"
        :data="data"
        :props="defaultProps"
        :highlight-current="true"
        :filter-node-method="filterNode"
        :default-expand-all="true"
        @node-click="nodeClick"
        ref="tree2">
      </el-tree>
    </div>

  </div>
</template>
<style>
  #divScrollCss {
    width:80%;
    border-right:1px solid #dddddd
  }

</style>
<script>
  import { yfuPost } from '@/utils/request.js'
  import store from '@/store'
  export default {
    // refresh 提供一个不重复的值，响应刷新
    props: ['treeApi', 'refresh'],
    watch: {
      filterText (val) {
        this.$refs.tree2.filter(val)
      },
      refresh: function () {
        // 响应刷新
        this.getData()
      }
    },
    created () {
      this.getData()
    },
    methods: {
      filterNode (value, data) {
        if (!value) return true
        return data.label.indexOf(value) !== -1
      },
      getData () {
        let cThis = this
        yfuPost(this.treeApi.baseURL, this.treeApi.url, {}, function (data) {
          cThis.data = data
        })
      },
      nodeClick (data, node, item) {
//        store.commit('setOrganizationId', node.id)
//        store.commit('setOrganizationName', node.label)
        this.$emit('listenToChildEvent', data)
      }
    },
    mounted () {
      let allHeight = document.documentElement.clientHeight
//      let recTOp = this.$refs.wrapper.getBoundingClientRect().top
      this.wrapperHeight = allHeight - 180
    },
    updated () {
      if (this.data != null && this.data.length > 0) {
        // 设置默认选中
        let selected = 0
        if (store.getters.currentOrganizationId != null && store.getters.currentOrganizationId !== 0) {
          selected = store.getters.currentOrganizationId
        } else {
          selected = this.data[0].id
          store.commit('setOrganizationId', this.data[0].id)
          store.commit('setOrganizationName', this.data[0].label)
        }
        this.$refs.tree2.setCurrentKey(selected)
      }
    },
    data () {
      return {
        filterText: '',
        wrapperHeight: 0,
        data: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    }
  }
</script>
